<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery.1.10.2.js"></script>

</head>
<body>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
        text-decoration: none;
    }

    body {
        padding: 20px;
    }

    #container {
        width: 600px;
        height: 400px;
        border: 3px solid #333;
        overflow: hidden;
        position: relative;
    }

    #list {
        width: 4200px;
        height: 400px;
        position: absolute;
        z-index: 1;
    }

    #list img {
        float: left;
    }

    #buttons {
        position: absolute;
        height: 10px;
        width: 100px;
        z-index: 2;
        bottom: 20px;
        left: 250px;
    }

    #buttons span {
        cursor: pointer;
        float: left;
        border: 1px solid #fff;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #333;
        margin-right: 5px;
    }

    #buttons .on {
        background: orangered;
    }

    .arrow {
        cursor: pointer;
        display: none;
        line-height: 39px;
        text-align: center;
        font-size: 36px;
        font-weight: bold;
        width: 40px;
        height: 40px;
        position: absolute;
        z-index: 2;
        top: 180px;
        background-color: RGBA(0, 0, 0, .3);
        color: #fff;
    }

    .arrow:hover {
        background-color: RGBA(0, 0, 0, .7);
    }

    #container:hover .arrow {
        display: block;
    }

    #prev {
        left: 20px;
    }

    #next {
        right: 20px;
    }
</style>
<div id="container">
    <div id="list" style="left: -600px;">
        <img src="images/55.jpg" alt="1">
        <img src="images/11.jpg" alt="1">
        <img src="images/22.jpg" alt="2">
        <img src="images/33.jpg" alt="3">
        <img src="images/44.jpg" alt="4">
        <img src="images/55.jpg" alt="5">
        <img src="images/11.jpg" alt="5">
    </div>
    <div id="buttons">
        <span index="1" class="on"></span>
        <span index="2" class=""></span>
        <span index="3" class=""></span>
        <span index="4" class=""></span>
        <span index="5" class=""></span>
    </div>
    <a href="javascript:;" id="prev" class="arrow">&lt;</a>
    <a href="javascript:;" id="next" class="arrow">&gt;</a>
</div>
<script>
    /***********************************************js******************************/
    window.onload = function () {

        //
        var container = document.getElementById('container')
        var list = document.getElementById('list')
        var prev = document.getElementById('prev')
        var next = document.getElementById('next')
        var buttons=document.getElementById('buttons').getElementsByTagName('span')
        var index=1 //小圆点
        var timer;


        //切换函数
        function animate(offset){
            list.style.left=parseInt(list.style.left)+offset+'px'
            var newLeft=parseInt(list.style.left)
            if(newLeft>-600){
                list.style.left= -3000 +'px'
            }
            if(newLeft<-3000){
                list.style.left= -600+'px'
            }
        }
        //小圆点
        function showButton(){
            for(var i=0;i<buttons.length;i++){
                if(buttons[i].className=='on'){
                    buttons[i].className=''
                    break
                }
            }
//            buttons[index-1].className='on'
            buttons[index-1].className='on'

            console.log(index)

//            if(index==1){
//                index=5
//            }
        }
       next.onclick=function(){
           animate(-600)
//           index += 1;
//
//           if(index==5){
//               index=1;
//           }else{
//               index+=1;
//           }
//           showButton()

           if(index==5){
               index=0
           }
           index++
           showButton()




       }
        prev.onclick=function(){
            animate(600)
            index--
            showButton()
        }
    }

</script>
</body>
</html>